<template>
  <div>
    <div class="main">
      <div class="content">
        <div class="container">
          <div class="left">
            <div class="photo_area">
              <el-form :model="forms" ref="form" label-width="80px">
                <el-form-item label="头像">
                  <el-upload
                    class="avatar-uploader"
                    action="http://127.0.0.1:3007/api/a/upload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    name="head_img"
                  >
                    <img :src="imageUrl!=null?imageUrl:imgDefault" class="avatar" style="width:30px"/>
                  </el-upload>
                  <p class="tips">tips:请上传2M以内JPG/PNG格式的图片，比例最好1:1</p>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="save">保存</el-button>
                </el-form-item>
              </el-form>

              <a class="updateimg">修改头像</a>
              <p class="stu-name">{{stuName}}</p>
            </div>
            <div class="nav-area">
              <div class="nav-title">个人中心</div>
              <ul>
                <li>实验室申请</li>
                <li>个人信息</li>
              </ul>
            </div>
          </div>
          <div class="right" id="app">
            <template>
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="等待确认" name="first">
                  <el-card class="box-card" v-show="show">
                    <div slot="header" class="clearfix">
                      <span>{{form.applyStatus == 2 ? "申请失败":"申请成功"}}</span>
                      <el-button style="float: right" type="primary" @click="applyConfirm">请点击确认信息</el-button>
                    </div>
                    <el-row class="query">
                      <el-col :span="12">
                        <div class="grid-content bg-purple">
                          <p>第几节课：{{form.applyDate}}</p>
                          <p>周几：{{form.applyDay}}</p>
                          <p>第几周：{{form.applyWeek}}</p>
                          <p>第几学期：{{form.termNumber}}</p>
                          <p>第几年：{{form.termYear}}</p>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="grid-content bg-purple-light">
                          <p>实验室申请ID号：{{form.labApplyId}}</p>
                          <p>实验室ID：{{form.labId}}</p>
                          <p>申请原因：{{form.reason}}</p>
                          <p>实验室审核原因：{{form.returnReason}}</p>
                        </div>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-tab-pane>
                <el-tab-pane label="已申请" name="second">
                  <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
                  >
                    <el-table-column
                      v-for="(value,name,index) in tableDatas"
                      :key="index"
                      :prop="name"
                      :label="value"
                      width="110"
                    ></el-table-column>
                  </el-table>
                </el-tab-pane>
              </el-tabs>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryUserApply } from "@/api/personalCenter/personalCenter.js";
import { processlabapply, deleteapply } from "@/api/teacher/query.js";
import imgDefault from '../../assets/header.jpg';
export default {
  data() {
    return {
      activeName: "first",
      form: {},
      stuName: this.$store.state.student.name,

      show: false,

      formLabelWidth: "120px",

      tableData: [],
      tableDatas: {
        labId: "ID",
        termYear: "年份",
        termNumber: "学期",
        applyWeek: "第几周",
        applyDay: "周几",
        applyDate: "节次",
        applyStatus: "状态",
      },
      forms: {
        nickname: this.nickname
      },
      imageUrl: null,
      imgDefault: imgDefault
    };
  },
  created() {
    queryUserApply()
      .then((response) => {
        if (response.code == 0) {
          let a = response.data.filter((item) => item.applyStatus == 2);
          let b = response.data.filter((item) => item.applyStatus == 1);
          // let d = response.data.filter((item) => item.applyStatus == 5);

          if (a.length == 0 && b.length == 0 && d.length == 5) {
            this.show = false;
          } else if (a.length > 0 && b.length == 0) {
            this.show = true;
            this.form = a[0];
            console.log("风跨行", this.form);
          } else if (a.length == 0 && b.length > 0) {
            this.show = true;
            this.form = b[0];
          }
        }
      })
      .catch((error) => {
        console.log(error);
      });
  },
  methods: {
    handleClick(tab, event) {
      queryUserApply()
        .then((response) => {
          if (response.code == 0) {
            console.log(response);
            let c = response.data.filter(
              (item) =>
                item.applyStatus == 3 ||
                item.applyStatus == 4 ||
                item.applyStatus == 5
            );
            for (let i = 0; i < c.length; i++) {
              if (c[i].applyStatus == 3) {
                c[i].applyStatus = "待使用";
              } else if (c[i].applyStatus == 5) {
                c[i].applyStatus = "实验结束但是未打扫";
              } else if (c[i].applyStatus == 4) {
                c[i].applyStatus = "完成使用";
              }
            }

            this.tableData = c;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },

    applyConfirm() {
      if (this.form.applyStatus == 1) {
        deleteapply({
          labApplyId: this.form.labApplyId,
        }).then((response) => {
          console.log(response);
          this.show = false;
        });
        location.reload();
      } else if (this.form.applyStatus == 2) {
        processlabapply({
          labApplyId: this.form.labApplyId,
          type: "stuApproval",
          returnReason: "实验进行中",
        }).then((response) => {
          this.show = false;
          location.reload();
        });
      }
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

     save() {
    //接口/api/user/updateUser为重新获取本页面需要的值的接口（注意不能带密码）
      this.$axios.post('/api/user/updateUser', {
        nickname: this.form.nickname,
        head_img: this.imageUrl
      }).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.$message({
            message: '更新成功',
            type: 'success'
          });
          setTimeout(() => {
            location.reload()
          }, 1500)
        }
      }).catch(e => {
        console.log(e)
      })
    },
    handleAvatarSuccess(res) {
      //提交成功
      
      this.imageUrl = res.data;
      console.log('豆瓣岳父也',this.imageUrl);
    },
    beforeAvatarUpload(file) {
      //提交前
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  },
};
</script>

<style lang="scss" scoped>
.content {
  background-color: #e2e2e2;
  height: 600px;
  width: 100%;
}
.container {
  padding: 50px 100px;
}
.left {
  width: 25%;
  height: 200px;
  float: left;
  margin: 0px 15px;
}
.photo_area {
  background: #fff;
  margin-bottom: 10px;
  text-align: center;
  padding: 20px;
}
.photo_area .photo {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}
.stu-name {
  height: 25px;
  font-size: 18px;
  color: #333;
  margin-top: 5px;
}
.right {
  width: 65%;
  height: 500px;
  background-color: white;
  float: left;
}
.nav-area {
  min-height: 380px;
  width: 100%;
  background: #fff;
  margin-bottom: 30px;
}
.nav-title {
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  color: #2466c5;
  text-align: center;
}
.nav-area ul {
  padding-bottom: 5px;
}
.nav-area ul li {
  height: 40px;
  line-height: 40px;
  color: #333;
  font-size: 16px;
  margin-bottom: 10px;
  cursor: pointer;
  position: relative;
  list-style: none;
  text-align: center;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.applyStyle {
  margin: 0 auto;
}
.applyStyle h1 {
  text-align: center;
}
.applyStyle button {
  float: right;
}
.el-tabs__content {
  padding: 15px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix {
  span {
    text-align: center;
    margin-left: 100px;
  }
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
</style>